import React, { Component } from 'react';
import {connect} from 'react-redux';
import {View} from '@tarojs/components'
import {AtSwitch} from 'taro-ui'
import {GetRequest} from "../../../../utils/tools";
import {http} from "../../../../utils/http";
import {TARO_ENV} from "../../../../constants/api";
import classnames from "classnames";
import "./index.scss";

export default class OptionPannel extends Component {
	constructor(props) {
		super(props);
		this.state = {
			autoExplainTitle: "自动讲解",
			autoExplain: false,
			showTile: true,
			useEn: false,
		};
	}

	componentDidUpdate(preProps) {
		if(this.props.visible !== preProps.visible && this.props.visible) {
			if(this.props.disabledAutoExplain) {
				this.setState({
					autoExplainTitle: "自动讲解 (您当前不在景区内)"
				})
			}
		}
	}

	handleChangeAE = value => {
		this.setState({autoExplain: value}, () => {
			// this.props.handleChangeAE(value); // 自动播放列表
			this.props.handleChangeAEByLocate(value);
		});
	};
	handleChangeTile = value => {
		this.setState({showTile: value}, () => {
			this.props.handleChangeTile(value);
		});
	};

	render() {
		const { visible, disabledAutoExplain, tileImgs } = this.props;
		const { autoExplainTitle, autoExplain, showTile, useEn } = this.state;

		return (
			<View className={classnames("option-pannel-page", {"active": visible})}>
				<View className="op-item">
					<AtSwitch
						className="flex-item"
						title={autoExplainTitle}
						color="#1FB177"
						checked={autoExplain}
						disabled={disabledAutoExplain}
						onChange={this.handleChangeAE}
					/>
				</View>
				<View className="op-item">
					{
						tileImgs &&
						<AtSwitch
							className="flex-item"
							title="手绘地图"
							checked={showTile}
							color="#1FB177"
							disabled={tileImgs.length === 0}
							onChange={this.handleChangeTile}
						/>
					}
				</View>
			</View>
		)
	}
}
